<template>
  <approval-node
    v-if="data.type === 'approval'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
  />
  <exclusive-gateway-node
    v-else-if="data.type === 'exclusive-gateway'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
    @add-condition="emit('addCondition', $event)"
    @del-condition="emit('delCondition', $event)"
  />
  <carbon-copy-node
    v-else-if="data.type === 'carbon-copy'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
  />
  <notify-node
    v-else-if="data.type === 'notify'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
  />
  <service-node
    v-else-if="data.type === 'service'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
  />
  <timer-node
    v-else-if="data.type === 'timer'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
    @del-node="emit('delNode', $event)"
  />
  <start-node
    v-else-if="data.type === 'start'"
    :data="data"
    @click="emit('click', $event)"
    @add-node="emit('addNode', $event)"
  />
  <end-node v-else-if="data.type === 'end'" :data="data" @click="emit('click', data)" />
  <div v-else>未知节点类型</div>
</template>

<script setup lang="ts">
import ApprovalNode from './nodes/ApprovalNode.vue';
import ExclusiveGatewayNode from './nodes/ExclusiveGatewayNode.vue';
import CarbonCopyNode from './nodes/CarbonCopyNode.vue';
import NotifyNode from './nodes/NotifyNode.vue';
import ServiceNode from './nodes/ServiceNode.vue';
import StartNode from './nodes/StartNode.vue';
import TimerNode from './nodes/TimerNode.vue';
import type { Node as N } from './type';
import EndNode from './nodes/EndNode.vue';

const emit = defineEmits(['click', 'addNode', 'delNode', 'addCondition', 'delCondition']);
const props = defineProps<{
  data: N;
}>();
</script>

<style lang="less">
@line-color: #dcdfe6;
@line-color-2: var(--td-success-color);
@line-color-3: #ddd;
.lg-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  .lg-node-box {
    width: 220px;
    min-height: 77px;
    background: #fff;
    color: #000;
    position: relative;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    .lg-name {
      background: var(--app-color-primary-5);
      color: #fff;
      padding: 0 16px;
      border-radius: 4px 4px 0 0;
    }
    .lg-content {
      padding: 16px;
      border-radius: 0 0 4px 4px;
    }
    .lg-del-btn {
      display: none;
    }
    &:hover {
      .lg-del-btn {
        display: flex;
      }
    }
  }
}

.lg-line-vertical {
  display: flex;
  justify-content: center;
  height: 84px;
  min-height: 84px;
  position: relative;
  z-index: 1;
  &:before {
    content: '';
    height: 100%;
    width: 3px;
    background: @line-color;
    border-radius: 1px;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 11px solid @line-color;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }
  .lg-add-node {
    position: absolute;
    top: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #409eff;
    color: #fff;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 27px;
  }
}

.lg-node:has(+ .lg-exclusive-nade),
.lg-exclusive > .lg-node:last-child {
  .lg-line-vertical:after {
    display: none;
  }
}

.lg-line-horizontal {
  background: @line-color;
  height: 3px;
  position: absolute;
  width: calc(var(--multiple) * 252px + 2px);
  border-radius: 1px;
}
.lg-line-top {
  top: 0;
  & + .lg-line-vertical {
    height: 56px;
    min-height: 56px;
  }
}
.lg-line-bottom {
  bottom: 0;
}

.lg-status-2,
.lg-exclusive-2 {
  > .lg-line-vertical {
    &:before {
      background: @line-color-2;
    }
    &:after {
      border-top: 6px solid @line-color-2;
    }
  }
  > .lg-line-horizontal {
    background: @line-color-2;
    z-index: 2;
  }
}
.lg-exclusive-1 {
  > .lg-line-vertical {
    &:before {
      background: @line-color-2;
    }
    &:after {
      border-top: 6px solid @line-color-2;
    }
  }
  > .lg-line-horizontal.lg-line-top {
    background: @line-color-2;
    z-index: 2;
  }
}
.lg-status-1 {
  .lg-node-box {
    .lg-name {
      background: var(--app-color-primary-7);
      color: #fff;
      padding: 0 16px;
    }
  }
}

.lg-status-3,
.lg-exclusive-3 {
  > .lg-line-vertical {
    &:before {
      background: @line-color-3;
    }
    &:after {
      border-top: 6px solid @line-color-3;
    }
  }
  > .lg-line-horizontal {
    background: @line-color-3;
  }
}

.lg-condition-top {
  position: relative;
  height: 16px;
  width: 100%;
  .lg-add-condition {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 15px;
    background-color: #ecf5ff;
    border-radius: 16px;
    border: 1px solid #dcdfe6;
    z-index: 3;
    cursor: pointer;
    color: #409eff;
    font-size: 14px;
    line-height: 1;
  }
}

.lg-name {
  height: 24px;
  line-height: 24px;
}
</style>
